<template>
  <div class="data-list-container">
    <!-- 顶部控制区域 -->
    <div class="control-panel">
      <!-- 列选择下拉菜单 -->
      <el-dropdown class="dropdown-control" trigger="click">
        <span class="el-dropdown-link">
          <el-button type="primary" size="small" :icon="Grid">
            {{ t('datacenter.iotdataPage.paramSelection') }}
          </el-button>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="checkbox-dropdown">
            <el-checkbox
              v-model="allSelected"
              :indeterminate="isIndeterminate"
              @change="handleAllChange"
              :label=" t('datacenter.iotdataPage.selectAll')"
            ></el-checkbox>
            <el-checkbox-group v-model="selectedColumns" class="vertical-checkbox-group">
              <el-checkbox
                v-for="item in columns"
                :key="item.val"
                :label="item.val"
                @change="handleColumnChange"
                class="vertical-checkbox-item"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table
            :data="iotData"
            :height="Math.max(height - 10, 400)"
            :width="width"
            style="width: 100%"
            @row-click="handleRowClick"
            size="small"
            :row-style="{ height: '40px' }"
            :cell-style="{ padding: '2px 2px', whiteSpace: 'nowrap' }"
          >
            <el-table-column
              fixed
              prop="deviceNo"
              :label="t('datacenter.iotdataPage.deviceNumber')"
              min-width="100"
              :show-overflow-tooltip="true"
            ></el-table-column>

            <el-table-column
              fixed
              prop="sampletime"
              :label="t('datacenter.iotdataPage.collectionTime')"
              min-width="170"
              :show-overflow-tooltip="true"
            >
              <template #default="scope">
                <span>{{formatSampletime(scope.row.sampletime)}}</span>
              </template>
             </el-table-column>

            <el-table-column
              v-for="col in visibleColumns"
              :key="col.val"
              :prop="col.val"
              :label="col.label+'('+col.unit+')'"
              :min-width="80"
              :show-overflow-tooltip="true"
            ></el-table-column>
          </el-table>
        </template>
      </el-auto-resizer>
    </div>


    <!-- 波形抽屉组件 -->
  <drawer-ae-wave-card
    v-model:visible="waveDrawerVisible"
    :product-key="currentRow.productKey"
    :device-no="currentRow.deviceNo"
    :sampletime="currentRow.sampletime"
    :deviceOptions="deviceOptions"
  />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch, toRaw } from "vue";
import { Download, Grid } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import DrawerAeWaveCard from '@/views/components/aewave/drawerAeWaveCard.vue';
import { formatSampletime } from "@/utils/appCommon/timeUtil";
import { useI18n } from "vue-i18n";

const props = defineProps({
  params: {
    type: Object,
    required: true
  },
  columns: {
    type: Array,
    required: true
  },
  data: {
    type: Array,
    required: true
  },
  total: {
    type: Number,
    required: true
  },
  deviceOptions: {
    type: Array,
    required: false,
    default: [],
  }
});
const emit = defineEmits(['onPageChange']);
const { t } = useI18n();

const columns = ref(props.columns);
const iotData = ref(props.data);
const total = ref(props.total);

// 波形抽屉状态
const waveDrawerVisible = ref(false);
const currentRow = ref({
  productKey: props.params.productKey,
  deviceNo: "",
  sampletime: 0,
});

// 列选择状态
const selectedColumns = ref<string[]>(columns.value.map(col => col.val));
const allSelected = ref(true);
const isIndeterminate = ref(false);

// 计算显示列
const visibleColumns = computed(() => {
  return columns.value.filter(col => selectedColumns.value.includes(col.val));
});

watch(
  () => props,
  (newVal) => {
    console.log(toRaw(newVal));
    columns.value = newVal.columns;
    selectedColumns.value = newVal.columns.map(col => col.val);
    iotData.value = newVal.data;
    currentRow.value.productKey = newVal.params.productKey;
    total.value = newVal.total;
  },{
    deep:true, immediate: true
  }
);

// 全选处理
const handleAllChange = (value: boolean) => {
  isIndeterminate.value = false;
  if (value) {
    selectedColumns.value = columns.value.map(col => col.val);
  } else {
    selectedColumns.value = [];
  }
};

// 列选择处理
const handleColumnChange = () => {
  const total = columns.value.length;
  const selected = selectedColumns.value.length;
  allSelected.value = selected === total;
  isIndeterminate.value = selected > 0 && selected < total;
};

// 行点击处理 - 打开波形抽屉
const handleRowClick = (row: any) => {
  console.log("handleRowClick",row.deviceNo)
  waveDrawerVisible.value = true;
  // 更新当前选择
  currentRow.value.deviceNo = row.deviceNo;
  currentRow.value.sampletime = row.sampletime;
  console.log(currentRow.value);
};



onMounted(() => {
  handleColumnChange(); // 初始化选择状态
});
</script>

<style lang="scss" scoped>
.data-list-container {
  width: 100%;
  height: 100%;
  padding: 3px;
  box-sizing: border-box;
}

.control-panel {
  display: flex;
  gap: 15px;
  margin-bottom: 0px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eaeaea;
}

.table-container {
  /* 修复：使用flex布局确保高度正确计算 */
  display: flex;
  flex-direction: column;
  height: calc(100% - 120px);
  min-height: 400px;
  overflow: hidden;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}

.checkbox-dropdown {
  width: 220px;
  max-height: 300px;
  overflow-y: auto;
  padding: 5px 0;
}

.vertical-checkbox-group {
  padding: 5px 15px;
}

.vertical-checkbox-item {
  display: block;
  margin: 8px 0;
}

/* 添加表格列自动扩展样式 */

</style>
